
// 链式运动,可以在上次运动接收开启下次运动 

// aniType 运动方式  (normal fast slow)
// fn      回调函数,在运动结束时执行
function animate(ele,attr,end,aniType="normal",fn){ 
    //   cur 1. 记录盒子最开始的初始值  2. 记录每次运动时的当前位置
    var cur = parseFloat(getStyle(ele,attr));   //传统的获取非行内样式 
    end = parseFloat(end);

    var speed = 0;   //加速运动
    clearInterval(ele.timer);   //开启下一个计时器之前 清除了上一个

    // 元素节点的本质  => 对象(属性和方法)  => 给对象赋值一个不存在的属性 => 新增该属性到对象中 
    // ele.timer = xxx   把计时器的编号 存储到 当前运动的元素上 => 取 ele.timer
    ele.timer = setInterval(function(){

        if(aniType == "normal"){
            // 匀速运动
            speed = end >= cur ? 20 : -20;  
            
        }else if(aniType == "fast"){
            // 加速运动   (speed = +10  -10)
            //正向运动 end>cur   speed正值(速度出现小数)    speed + 5
            //反选运动 end<cur   speed负值(速度出现小数)    speed - 5 
            speed = end >= cur ? speed+5 : speed-5;
        }else if(aniType == "slow"){
             // 缓冲运动
            // (终点值 - 当前值) / 缓冲因子  => 剩余距离 / n
            //  缓冲因子 一般 8-12之间
            speed = (end - cur) / 10;
            //正向运动 end>cur   speed正值(速度出现小数)    0.000001   => 向上取整
            //反选运动 end<cur   speed负值(速度出现小数)   -0.000001   => 向下取整
            speed = end >= cur ? Math.ceil(speed) : Math.floor(speed);
        }
        // console.log(cur,speed);

        cur += speed;
        ele.style[attr] = cur + "px"; 
        if(Math.abs(end - cur) < Math.abs(speed)){  // cur >= 100   超出临界值
            clearInterval(ele.timer);
            ele.style[attr] = end + "px";   //强制到达终点

            if(fn){   //如果传入了回调函数 => 在运动结束时执行
                fn();
            }
        }
    },10);
}


function getStyle(ele,attr){
    if(window.getComputedStyle){
        return window.getComputedStyle(ele)[attr];
    }else{
        return ele.currentStyle[attr];
    }
}
